<template>
	<div class="tabel_Background">
		<div class="tabel_Background-wra">
			<div class="container" ref="usage_ref"></div>
		</div>
	</div>
</template>

<script setup>
	import {
		getCharge,
		getChargeArea
	} from "@/api/index";
	export default {
		name: "NumData",
		data() {
			return {
				data: {
					wellname: "",
					yearstr: "",
					yearhalf: "",
					quarterid: "0",
					monthstr: "",
					craft: "",
					depth: "",
					deg: ""
				},
				data1: {
					wellname: "",
					yearstr: "",
					yearhalf: "",
					quarterid: "0",
					monthstr: "",
					craft: "",
					depth: "",
					deg: ""
				},
				chartInstance: null,
				allData: null,
			};
		},

		beforeDestroy() {
			this.$bus.$off('analyzeChoose');
			// 移除对 sessionStorage 的监听
			// window.removeEventListener("setItem", () => {});
			// sessionStorage.removeItem('data');
		},

		mounted() {
			if (sessionStorage.getItem("wellName") || sessionStorage.getItem("yearstr")) {
				if (!sessionStorage.getItem("wellName") && sessionStorage.getItem("yearstr")) {
					this.data1.wellname = '';
					this.data1.yearstr = sessionStorage.getItem("yearstr");
				} else if (!sessionStorage.getItem("yearstr") && sessionStorage.getItem("wellName")) {
					this.data1.wellname = sessionStorage.getItem("wellName");
					this.data1.yearstr = '';
				} else if (sessionStorage.getItem("yearstr") && sessionStorage.getItem("wellName")) {
					this.data1.wellname = sessionStorage.getItem("wellName");
					this.data1.yearstr = sessionStorage.getItem("yearstr");
				}
				// sessionStorage.removeItem("yearstr");
				// sessionStorage.removeItem("wellName");
				this.getChargeInfor(this.data1);
			} else if (sessionStorage.getItem("localtionData")) {
				// console.log(JSON.parse(sessionStorage.getItem("localtionData")))
				let localtionData1 = JSON.parse(sessionStorage.getItem("localtionData"));
				this.getChargeAreaInfor(localtionData1);
				// sessionStorage.removeItem("localtionData");
			} else {
				this.getChargeInfor(this.data);
			};
			this.$bus.$on('analyzeChoose', content => {
				// console.log(content);
				this.data = content;
				this.depthInfor = [];
				this.getChargeInfor(this.data);
			});
		},
		methods: {
			async getChargeAreaInfor(val) {
				let chargeList = [];
				let dataList = [];
				const {
					data: res
				} = await getChargeArea(val);
				// console.log(res.data);
				for (let i = 0; i < res.data.length; i++) {
					chargeList.push(res.data[i].chargeType);
					dataList.push(res.data[i].data);
				};
				this.initChart();
				this.getData(chargeList, dataList);
			},

			async getChargeInfor(val) {
				let chargeList = [];
				let dataList = [];
				const {
					data: res
				} = await getCharge(val);
				// console.log(res.data);
				for (let i = 0; i < res.data.length; i++) {
					chargeList.push(res.data[i].chargeType);
					dataList.push(res.data[i].data);
				};
				this.initChart();
				this.getData(chargeList, dataList);
			},

			initChart() {
				this.chartInstance = this.$echarts.init(this.$refs.usage_ref);
			},
			getData(chargeList, dataList) {
				//服务器的数据请求位置

				// this.allData = ret
				this.updateChart(chargeList, dataList);
			},
			updateChart(chargeList, dataList) {
				var max = Math.max.apply(null, dataList); //取出数组中最大值

				let total = 0;
				dataList.forEach((item) => {
					total += item;
				});

				let perData = [];

				dataList.forEach((item) => {
					perData.push((item / total * 100).toFixed(2))
				});

				// console.log(perData);
				var max1 = Math.max.apply(null, perData);
				// console.log(total);
				let option = {
					tooltip: {
						trigger: 'axis',
						axisPointer: {
							type: 'cross',
							label: {
								backgroundColor: '#283b56',
							},
						},
						formatter: (params) => {
							// console.log(params);
							let result = `${params[0].name}<br>`;
							params.forEach((item) => {
								if (item.value) {
									if (item.seriesName === '射孔弹比例') {
										result += `${item.marker} ${item.seriesName} : ${item.value} %</br>`; //{a}（系列名称），{b}（数据项名称），{c}（数值）, {d}（百分比）
									} else if (item.seriesName === '射孔弹') {
										result += `${item.marker} ${item.seriesName} : ${item.value}</br>`;
									}
								}
							});
							return result;
						},
					},
					grid: {
						//x轴与y轴离dom边的距离
						top: "20%",
						right: "8%",
						bottom: "20%",
						left: "5%"
					},
					legend: {
						data: ['射孔弹', '射孔弹比例'],
						right: '15%',
						textStyle: {
							color: '#ffffff',
						}
					},
					// dataZoom: {
					// 	show: false,
					// 	start: 0,
					// 	end: 100
					// },
					dataZoom: [{
							type: 'inside',
							start: 0,
							end: 30
						},
						{
							height: 5,
							bottom: '23%',
							start: 0,
							end: 30
						}
					],
					xAxis: [{
							type: "category",
							boundaryGap: true,
							// data: chargeList,
							data: chargeList,
							axisLabel: {
								interval: 0, //坐标刻度之间的显示间隔，默认就可以了（默认是不重叠）
								rotate: 20,
								//y轴文字的配置
								textStyle: {
									color: "#c6c8ce", //Y轴内容文字颜色
								}
							},
							axisLine: {
								//x轴线的颜色以及宽度
								show: true,
								lineStyle: {
									color: "#0a3169",
									width: 2,
									type: "solid"
								}
							},
							axisTick: {
								show: false
							}
						},
						{
							type: "category",
							boundaryGap: true,
							show: false,
							// data: chargeList,
							data: chargeList,
							axisLabel: {
								interval:0, //坐标刻度之间的显示间隔，默认就可以了（默认是不重叠）
								rotate: 45,
								//y轴文字的配置
								textStyle: {
									color: "#c6c8ce" //Y轴内容文字颜色
								}
							},
							axisLine: {
								//x轴线的颜色以及宽度
								show: true,
								lineStyle: {
									color: "#0a3169",
									width: 2,
									type: "solid"
								}
							}
						}
					],
					yAxis: [{
							type: "value",
							scale: true,
							name: "单位：数量",
							nameTextStyle: {
								//y轴上方单位的颜色
								color: "#00c3f4"
							},
							max: max,
							min: 0,
							boundaryGap: [0.2, 0.2],
							axisLabel: {
								//y轴文字的配置
								textStyle: {
									color: "#00c3f4" //Y轴内容文字颜色
								}
							},
							axisLine: {
								//x轴线的颜色以及宽度
								show: true,
								lineStyle: {
									color: "#0a3169",
									width: 2,
									type: "solid"
								}
							},
							splitLine: {
								show: false // X轴线 颜色类型的修改
							}
						},
						{
							type: 'value',
							scale: true,
							name: "单位：%",
							splitLine: {
								show: true,
								lineStyle: {
									type: 'dashed',
									color: '#00c3f4'
								}
							},
							max: parseInt(max1 + 10),
							min: 0,
							axisLine: {
								lineStyle: {
									color: '#00c3f4',

								}
							},
							axisLabel: {
								formatter: '{value}%', //右侧以百分比进行展示
								show: true,
								textStyle: {
									color: '#aee0ff',
									// fontSize: '16'
								}
							},
							textStyle: {
								color: '#00c3f4',
								// fontSize: '16'
							}
							// boundaryGap: [0.2, 0.2]
						}
					],
					series: [{
						name: "射孔弹",
						type: "bar",
						xAxisIndex: 0,
						yAxisIndex: 0,
						// data: dataList,
						data: dataList,
						barWidth: 15,
						itemStyle: {
							normal: {
								//这里是颜色
								color: "#37bbe1",
								// ccolor: '#ff0606',
								barBorderRadius: [15, 15, 0, 0], // （顺时针左上，右上，右下，左下）
								// function(params) {
								//   //注意，如果颜色太少的话，后面颜色不会自动循环，最好多定义几个颜色
								//   var colorList = [
								//     "#00A3E0",
								//     "#FFA100",
								//     "#ffc0cb",
								//     "#CCCCCC",
								//     "#BBFFAA",
								//     "#749f83",
								//     "#ca8622"
								//   ];
								//   return colorList[params.dataIndex];
								// }
							}
						}
					}, {
						name: "射孔弹比例",
						type: "line",
						xAxisIndex: 0,
						yAxisIndex: 1,
						// data: dataList,
						data: perData,
						itemStyle: {
							normal: {
								color: "#f6c701"
							}
						}
					}]
				};

				this.chartInstance.setOption(option);
			}
		},
		props: {
			title: String
		}
	};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="less" scoped>
	.container {
		width: 100%; // 3rem;
		height: 108%; //1.48rem;
	}

	.tabel_Background {

		width: 70%; //3.02rem;
		height: 100%;
		box-sizing: border-box;
	}

	.tabel_Background-wra {
		width: 100%; //3.02rem;
		min-width: 2.96rem;
		height: 100%;
		// border: 1px solid rgb(12, 50, 107);
		background-image: url("../../assets/webqt/bg_6@2x.png");
		// background-image: url('./../../../assets/mobile/pre-share-page@2x.png');
		background-repeat: no-repeat;
		background-size: 100% 100%; // contain; // cover;
		padding: 2%;
		box-sizing: border-box;
	}

	#title {
		width: 22%; //3.02rem;
		height: 11%;
		min-width: 2.96rem;
		text-align: center;
		font-size: 6px;
		background-image: url("../../assets/title_outline@2x.png");
		background-repeat: no-repeat;
		background-size: 100% 100%; //cover;
		position: relative;
	}

	.title-text {
		position: absolute;
		left: 5%;
		top: 17%;
		color: #21beeb;
		font-weight: bold;
	}
</style>
